<template>
	<div class="lefNav">
		<el-menu
			@open="handleOpen"
			@close="handleClose"
			background-color="#425166"
			text-color="#fff"
			active-text-color="#fff"
		>
			<el-submenu
				v-for="item in this.leftNavList"
				:index="item.id"
				:key="item.id"
			>
				<template slot="title">
					<i :class="'iconfont icon ' + item.iconClass"></i>
					<span>{{ item.name }}</span>
				</template>

				<el-menu-item
					v-for="(item1, index) in item.children"
					:key="index"
					@click="goto(item1.path)"
				>
					<i class="iconfont icon1 icon-yuandianxiao"></i>
					{{ item1.name }}
				</el-menu-item>
			</el-submenu>
		</el-menu>
	</div>
</template>
<script>
export default {
	data() {
		return {
			leftNavList: [],
		}
	},
	methods: {
		handleOpen(key, keyPath) {
			console.log(key, keyPath)
		},
		handleClose(key, keyPath) {
			console.log(key, keyPath)
		},
		// 编程式导航
		goto(path) {
			console.log(path)
			this.$router.push(path)
		},
	},
	filters: {},
	beforeDestroy() {},
	created() {
		// 请求导航菜单数据
		this.$http
			.get(
				"https://c02f5d9c-d6dc-41b6-a7b1-8676cc57ee1d.mock.pstmn.io/get/leftNav"
			)
			.then(ret => {
				this.leftNavList = ret[1].data
			})
	},
}
</script>
<style lang="scss" scoped>
@import "../../assets/scss/leftNav.scss";
</style>
